<html>
  <head>
    <title>Indented Tree</title>
    <script type="text/javascript" src="protovis-r3.2.js"></script>
    <script type="text/javascript" src="treevisitor.js"></script>

  <style type="text/css">
      body {
        margin: 0;
        display: table;
        height: 100%;
        width: 100%;
        font: 14px/134% Helvetica Neue, sans-serif;
      }

      #center {
        display: table-cell;
        vertical-align: middle;
      }

      #fig {
        position: relative;
        margin: auto;
      }

  </style>
  </head>
  <body>


    <script type="text/javascript+protovis">

for (first in treevisitor) break;

var root = pv.dom(treevisitor)
    .root(first)
    .sort(function(a, b) pv.naturalOrder(a.nodeName, b.nodeName));

/* Recursively compute the package sizes. */
root.visitAfter(function(n) {
  if (n.firstChild) {
    n.nodeValue = pv.sum(n.childNodes, function(n) n.nodeValue);
  }
});

var vis = new pv.Panel()
    .width(400)
    .height(function() (root.nodes().length + 1) * 12)
    .margin(5);

var layout = vis.add(pv.Layout.Indent)
    .nodes(function() root.nodes())
    .depth(25)
    .breadth(12);

layout.link.add(pv.Line);

var node = layout.node.add(pv.Panel)
    .top(function(n) n.y - 6)
    .height(12)
    .right(6)
    .strokeStyle(null)
    .events("all")
    .event("mousedown", toggle);

node.anchor("left").add(pv.Dot)
    .strokeStyle("#1f77b4")
    .fillStyle(function(n) n.toggled ? "#1f77b4" : n.firstChild ? "#aec7e8" : "#ff7f0e")
    .title(function t(d) d.parentNode ? (t(d.parentNode) + "." + d.nodeName) : d.nodeName)
  .anchor("right").add(pv.Label)
    .text(function(n) n.nodeName);

node.anchor("right").add(pv.Label)
    .textStyle(function(n) n.firstChild || n.toggled ? "#aaa" : "#000")
    .text(function(n) (n.nodeValue >> 10) + "KB");

vis.render();

/* Toggles the selected node, then updates the layout. */
function toggle(n) {
  n.toggle(pv.event.altKey);
  return layout.reset().root;
}

    </script>
  </body>
</html>
